<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
<div id="div">
    <table border="1px" width="300px" align="center">
        <tr>
            <th>用户id</th>
            <th>用户名</th>
            <th>登陆密码</th>
        </tr>

        <!-- 数据显示在users里面 -->
        <!--遍历users-->
        <div id="users">
            <tr v-for="user in users" align="center">
                <td>{{user.name}}</td>
                <td>{{user.name}}</td>
                <td>{{user.password}}</td>
            </tr>
        </div>
    </table>
</div>


</body>
<script>
    new Vue({
        el: "#div",
        data: {
            users: []
        },
        methods: {
            findAllUsres() {
                //拿到url地址
                let url = "/searchUserServlet";
                axios.get(url)
                    .then(response => {
                        //判断状态码和信息是否符合要求
                        if (response.data.msg == "ok" && response.data.status == 200) {
                            console.log(response.data.data)
                            this.users = response.data.data;
                        }
                    })
            }
        },
        // data初始化,视图还没初始化
        // 适合在这里发起请求,获取服务器数据
        // 生命周期函数，表示vue对象创建好之后在执行该函数
        created() {
            this.findAllUsres();
        }
    });
</script>
</html>